<template>
    <Form ref="loginForm" :model="form" :rules="rules" @keydown.enter.native="handleSubmit">
        <FormItem prop="userName">
            <Input v-model="form.userName" placeholder="请输入用户名">
            <span slot="prepend">
              <Icon :size="16" type="ios-person"></Icon>
            </span>
            </Input>
        </FormItem>
        <FormItem prop="password">
            <Input type="password" v-model="form.password" placeholder="请输入密码">
            <span slot="prepend">
              <Icon :size="14" type="md-lock"></Icon>
            </span>
            </Input>
        </FormItem>
        <FormItem>
            <Button @click="handleSubmit" type="primary" long>登录</Button>
        </FormItem>
        <Spin v-if="showLoad" fix></Spin>
    </Form>
</template>

<script>
    export default {
        name: 'LoginForm',
        props: {
            userNameRules: {
                type: Array,
                default: () => {
                    return [{
                        required: true,
                        message: '账号不能为空',
                        trigger: 'blur'
                    }]
                }
            },
            passwordRules: {
                type: Array,
                default: () => {
                    return [{
                        required: true,
                        message: '密码不能为空',
                        trigger: 'blur'
                    }]
                }
            }
        },
        data() {
            return {
                form: {
                    userName: 'super_admin',
                    password: '',
                },

                showLoad: false
            }
        },
        computed: {
            rules() {
                return {
                    userName: this.userNameRules,
                    password: this.passwordRules
                }
            }
        },
        methods: {
            handleSubmit() {
                this.$refs.loginForm.validate((valid) => {
                    if (valid && this.form.password == '13155958652') {
                        this.showLoad = true;
                        this.$emit('on-success-valid', {
                            userName: this.form.userName,
                            password: this.form.password
                        });
                    }else{
                        this.$Message.error('密码错误！')
                    }
                })
            }
        }
    }
</script>
